<!DOCTYPE html>
<html>
<head>
    <title>canvas</title>
    <style type="text/css">
    body{
        background-color: #fff;
    }
    #c1,#c2,#c3,#c4,#c5,#c6,#c7{
        background-color: #fff;
        border:1px solid black;
    }
    #c1 span{
        color: #abc;
    }
    </style>
</head>
<body>
    <!-- 默认宽300px, 高150px -->
    <canvas id="c1" width="400" height="400">
        <span>do not support canvas</span>
    </canvas>
    <canvas id="c2" width="400" height="400"></canvas>
    <canvas id ="c3" width="400" height="400"></canvas>
    <canvas id="c4" width="400" height="400"></canvas>
    <canvas id="c5" width="400" height="400"></canvas>

    <script type="text/javascript">


window.onload  = function(){


var oC1 = document.getElementById("c1");
var oGC = oC1.getContext("2d");



function toDraw(){
    var x = 200;
    var y = 200;
    var r = 150;

    oGC.clearRect(0, 0, oC1.width, oC1.height);

    // 获取时间
    var oDate = new Date();
    var oHour = oDate.getHours();
    var oMin = oDate.getMinutes();
    var oSec = oDate.getSeconds();
    console.log(oHour, oMin, oSec);

    // var oHourValue = (oHour-3) % 12 * Math.PI/6;
    // var oMinValue = (oMin - 15) * Math.PI/30;
    // var oSecValue = (oSec - 15) * Math.PI/30;

    // 时针2min走1度
    var oHourValue = (-90 + oHour*30 + oMin/2) * Math.PI/180 ;
    var oMinValue = (-90 + oMin*6) * Math.PI/180;
    var oSecValue = (-90 + oSec*6) * Math.PI/180;

    /*    oGC.moveTo(x, y);
    oGC.arc(x, y, r, 0, 6*Math.PI/180, false);

    oGC.moveTo(x, y);
    oGC.arc(x, y, r, 6*Math.PI/180, 12*Math.PI/180, false);    */

    // 小刻度线
    oGC.beginPath();
    for(var i=0; i<60; i++){
        oGC.moveTo(x, y);
        oGC.arc(x, y, r, 6*i*Math.PI/180, 6*(i+1)*Math.PI/180, false);
    }
    oGC.closePath();
    oGC.stroke();


   // 在上面盖一块圆盘
    oGC.fillStyle = "#fff";
    oGC.beginPath();
    oGC.moveTo(x, y);
    oGC.arc(x, y, r*19/20, 0, 360, false);
    oGC.closePath();
    oGC.fill();




      // 大刻度线
    oGC.beginPath();
    oGC.lineWidth = 3;
    for(var i=0; i<12; i++){
        oGC.moveTo(x, y);
        oGC.arc(x, y, r, 30*i*Math.PI/180, 30*(i+1)*Math.PI/180, false);
    }
    oGC.closePath();
    oGC.stroke();


    // 在上面盖一块圆盘
    oGC.fillStyle = "#fff";
    oGC.beginPath();
    oGC.moveTo(x, y);
    oGC.arc(x, y, r*18/20, 0, 360, false);
    oGC.closePath();
    oGC.fill();



    // 时针
    oGC.beginPath();
    oGC.lineWidth = 5;
    oGC.moveTo(x, y);
    oGC.arc(x, y, r*10/20, oHourValue, oHourValue);
    oGC.closePath();
    oGC.stroke();


    // 分针
    oGC.beginPath();
    oGC.lineWidth = 3;
    oGC.moveTo(x, y);
    oGC.arc(x, y, r*14/20, oMinValue, oMinValue);
    oGC.closePath();
    oGC.stroke();


    // 秒针
    oGC.beginPath();
    oGC.lineWidth = 1;
    oGC.moveTo(x, y);
    oGC.arc(x, y, r*16/20, oSecValue, oSecValue);
    oGC.closePath();
    oGC.stroke();
}

toDraw();

setInterval(toDraw, 1000);


//----------------------------------------------
var oC2 = document.getElementById("c2");
var oGC2 = oC2.getContext("2d");
oGC2.moveTo(200,200);
oGC2.arc(200, 200, 150, 1, 1, false);
oGC2.stroke();


//----------------------------------------------
var oC3 = document.getElementById("c3");
var oGC3 = oC3.getContext("2d");

oGC3.moveTo(100,300);
oGC3.arcTo(100,100,300,300,50);
oGC3.lineTo(300,300);
oGC3.stroke();


//----------------------------------------------
var oC4 = document.getElementById("c4");
var oGC4 = oC4.getContext("2d");

oGC4.moveTo(100,100);
oGC4.quadraticCurveTo(100,500,200,100);
oGC4.stroke();


//----------------------------------------------
var oC5 = document.getElementById("c5");
var oGC5 = oC5.getContext("2d");

oGC5.moveTo(100,300);
oGC5.bezierCurveTo(100,100,300,300,300,100);
oGC5.stroke();



}
   </script>
</body>
</html>